<!--
 * @Description:
 * @Author bianpengfei
 * @create 2021/3/23 22:34
 -->
<template>
  <div
    :class="[
      'g-app__menu',
      'g-app__menu-parent',
      _menuIsCollapse ? 'g-app__menu-is-collapse' : 'g-app__menu-is-no-collapse'
    ]"
  >
    <!--默认布局-->
    <template v-if="_layout == 'default'">
      <div class="g-app__menu-child g-app__menu-horizontal">
        <div class="g-app__menu-child-side">
          <logo :title-show="false" class="g-app__menu-logo"></logo>
          <div class="g-app__menu-side-inner">
            <el-scrollbar style="height: 100%" wrap-style="overflow-x:hidden;">
              <ul>
                <li
                  v-for="(item, index) in _defaultMenuFirstLevel"
                  :key="index"
                  :class="[
                    'g-side-inner__item',
                    _defaultDefaultActive.includes(item.path) && 'g-side-inner__item--active'
                  ]"
                  @click="onClickMenuItem(item)"
                >
                  <i :class="[_iconfont, item.icon || item?.meta?.icon || 'el-icon-menu']"></i>
                  <p>{{ item.title || item?.meta?.title }}</p>
                </li>
              </ul>
            </el-scrollbar>
          </div>
        </div>
        <div v-show="_hvMenus.length" class="g-app__menu-child-side-2">
          <div v-show="!_menuIsCollapse" class="g-app__menu-side-x5qron3c">
            {{ _breadcrumb?.[0]?.title || _breadcrumb?.[0]?.meta?.title }}
          </div>
          <div class="g-app__menu-child-side-2-inner">
            <Menu
              mode="vertical"
              :default-active="$route.path"
              :menu-collapse="_menuIsCollapse"
              :menus-default-openeds="_menusDefaultOpeneds"
              :menus="_hvMenus"
              @onClickMenuItem="onClickMenuItem"
            ></Menu>
          </div>
        </div>
      </div>
    </template>

    <!--曼陀罗布局-->
    <template v-else-if="_layout == 'mandala'">
      <div class="g-app__menu">
        <div class="g-app__menu-child">
          <Menu
            mode="vertical"
            :default-active="$route.path"
            :menu-collapse="_menuIsCollapse"
            :menus-default-openeds="_menusDefaultOpeneds"
            :menus="_menus"
            class="g-app__menu-container"
            @onClickMenuItem="onClickMenuItem"
          ></Menu>
        </div>
      </div>
    </template>

    <!--水平布局-->
    <template v-if="_layout == 'horizontal'">
      <div class="g-app__menu-child g-app__menu-horizontal">
        <logo :title-show="!_menuIsCollapse" class="g-app__menu-logo"></logo>
        <Menu
          mode="vertical"
          :default-active="$route.path"
          :menu-collapse="_menuIsCollapse"
          :menus-default-openeds="_menusDefaultOpeneds"
          :menus="_menus"
          class="g-menu-vertical"
          @onClickMenuItem="onClickMenuItem"
        ></Menu>
      </div>
    </template>

    <!--水平 + 垂直 布局-->
    <template v-else-if="_layout == 'horizontal-vertical'">
      <div class="g-app__menu-child">
        <logo :title-show="!_menuIsCollapse" class="g-app__menu-logo"></logo>
        <template v-if="Array.isArray(_hvMenus) && _hvMenus.length">
          <Menu
            mode="vertical"
            :default-active="$route.path"
            :menu-collapse="_menuIsCollapse"
            :menus-default-openeds="_menusDefaultOpeneds"
            :menus="_hvMenus"
            class="g-menu-vertical"
            @onClickMenuItem="onClickMenuItem"
          ></Menu>
        </template>

        <template v-else>
          <g-empty v-show="!_menuIsCollapse" description="菜单数据不存在" style="height: 40vh"></g-empty>
        </template>
      </div>
    </template>
  </div>
</template>

<script>
import { sync, call, get } from 'vuex-pathify'
import Logo from '../../components/logo'
import Menu from '../../components/menu'
import { isExternalLink } from '@libs/utils/common'
export default {
  components: { Logo, Menu },
  data() {
    return {}
  },

  computed: {
    _menuIsCollapse: sync('app/menuIsCollapse'),
    _menus: sync('app/menus'),
    _menusDefaultOpeneds: get('app/menusDefaultOpeneds'),
    _menuDefaultActive: get('app/menuDefaultActive'),
    _menusList: get('app/menusList'),
    _layout: get('app/layout'),
    _breadcrumb: get('app/breadcrumb'),
    _iconfont: get('app/iconfont'),

    /* 垂直 + 水平*/
    _hvMenus() {
      let active = this.$route.path
      if (Array.isArray(this._breadcrumb)) {
        active = this._breadcrumb.slice(0).shift()?.path
      }
      return this._menus.find((v) => v.path == active)?.children || []
    },

    /** 默认布局menu第一层数据*/
    _defaultMenuFirstLevel() {
      if (this._layout != 'default') return []
      let menu = this._menus
        .filter((v) => !v.meta?.hidden)
        .map((v) => {
          const vClone = { ...v }
          if (Array.isArray(v.children)) {
            vClone.path = vClone.children.slice(0).shift()?.path
          }
          if (vClone.children) {
            delete vClone.children
          }
          return vClone
        })
      return menu
    },

    /* 默认布局 第一级激活的菜单项*/
    _defaultDefaultActive() {
      if (this._layout != 'default') return []
      let active = this.$route.path
      if (Array.isArray(this._breadcrumb)) {
        console.log('children-_breadcrumb', this._breadcrumb)
        const path = this._breadcrumb.slice(0).shift()?.path
        const children = this._menus.filter((v) => !v?.meta?.hidden).find((v) => v.path == path)?.children
        console.log('children', children)
        if (Array.isArray(children)) {
          active = children.slice(0).shift()?.path
        }
      }
      return active
    }
  },

  methods: {
    _addMenusDefaultOpeneds: call('app/addMenusDefaultOpeneds'),
    _removeMenusDefaultOpeneds: call('app/removeMenusDefaultOpeneds'),

    onClickMenuItem(route) {
      if (isExternalLink(route.path)) {
        return window.open(route.path)
      }
      this.$router.push(route.path)
    }
  }
}
</script>
